<template>
  <Echart
    id="rightTop"
    :options="option"
    class="right_top_inner"
    ref="charts"
  />
  <!--  <Reacquire v-else @onclick="getData" style="line-height: 200px">
      重新获取
    </Reacquire>-->
</template>

<script>
import { currentGET } from 'api/modules';
import { graphic } from 'echarts';
import { internalLeadershipCockpit } from '@/api';

export default {
  data() {
    return {
      option: {},
      pageflag: false,
      timer: null,
    };
  },
  props: ['cycleId'],
  created() {

  },

  watch: {
    cycleId(cycleId) {
      this.getData(cycleId);
    },
  },
  mounted() {
    console.log('cycleId',this.cycleId)
    this.getData(this.cycleId);
  },
  beforeDestroy() {
    this.clearData();
  },
  methods: {
    clearData() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    getData(cycleId) {
      this.pageflag = true;
      // this.pageflag =false
      internalLeadershipCockpit(cycleId).then((res) => {
        if (res.success) {
          this.countUserNumData = res.data;
          this.$nextTick(() => {
            this.init(res.data);
          });
        }
      });
    },
    //轮询
    switper() {
      if (this.timer) {
        return;
      }
      let looper = (a) => {
        this.getData();
      };
      this.timer = setInterval(
        looper,
        this.$store.state.setting.echartsAutoTime,
      );
      let myChart = this.$refs.charts.chart;
      myChart.on('mouseover', (params) => {
        this.clearData();
      });
      myChart.on('mouseout', (params) => {
        this.timer = setInterval(
          looper,
          this.$store.state.setting.echartsAutoTime,
        );
      });
    },
    init(data) {
      let xData = [], zhunbeiData = [], liaojieData = [], baogaoData = [], fankuiData = [], yijiaoData = [],
        zhenggaiData = [];
      data.forEach(i => {
        let name = Object.keys(i)[0];
        xData.push(name);
        const typeArr = i[name];
        zhunbeiData.push(typeArr[5].number);
        liaojieData.push(typeArr[4].number);
        baogaoData.push(typeArr[3].number);
        fankuiData.push(typeArr[2].number);
        yijiaoData.push(typeArr[1].number);
        zhenggaiData.push(typeArr[0].number);
      });
      console.log('xData', xData, zhunbeiData, liaojieData, baogaoData, fankuiData, yijiaoData, zhenggaiData);
      console.log('xData', xData);
      this.option = {
        legend: {
          data: ['准备', '了解', '报告', '反馈', '移交', '整改'],
          textStyle: {
            color: '#fff',
          },
        },
        xAxis: {
          type: 'category',
          data: xData,
          boundaryGap: false, // 不留白，从原点开始
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(31,99,163,.2)',
              type: 'dashed',
            },
          },
          axisLine: {
            // show:false,
            lineStyle: {
              color: 'rgba(31,99,163,.1)',
            },
          },
          axisLabel: {
            color: '#7EB7FD',
            fontWeight: '500',
            rotate: 345,
          },
        },
        yAxis: {
          type: 'value',
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(31,99,163,.2)',
              type: 'dashed',
            },
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(31,99,163,.1)',
            },
          },
          axisLabel: {
            color: '#7EB7FD',
            fontWeight: '500',
          },
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0,0,0,.6)',
          borderColor: 'rgba(147, 235, 248, .8)',
          textStyle: {
            color: '#FFF',
          },
        },
        grid: {
          //布局
          show: true,
          left: '0px',
          right: '0px',
          bottom: '0px',
          top: '30px',
          containLabel: true,
          borderColor: '#1F63A3',
        },
        series: [
          {
            data: zhunbeiData,
            type: 'line',
            smooth: true,
            name: '准备',
            color: 'rgba(255,255,0,1.000)',
            areaStyle: {
              //右，下，左，上
              color: new graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: 'rgba(255,255,0,1.000)',
                  },
                  {
                    offset: 1,
                    color: 'rgba(252,144,16,.0)',
                  },
                ],
                false,
              ),
            },
            markPoint: {
              data: [
                {
                  name: '最大值',
                  type: 'max',
                  valueDim: 'y',
                  symbol: 'rect',
                  symbolSize: [60, 26],
                  symbolOffset: [0, -20],
                  itemStyle: {
                    color: 'rgba(0,0,0,0)',
                  },
                  label: {
                    color: '#FC9010',
                    backgroundColor: 'rgba(252,144,16,0.1)',
                    borderRadius: 6,
                    padding: [7, 14],
                    borderWidth: 0.5,
                    borderColor: 'rgba(252,144,16,.5)',
                    formatter: '{c}',
                  },
                },
                {
                  name: '最大值',
                  type: 'max',
                  valueDim: 'y',
                  symbol: 'circle',
                  symbolSize: 6,
                  itemStyle: {
                    color: '#FC9010',
                    shadowColor: '#FC9010',
                    shadowBlur: 8,
                  },
                  label: {
                    formatter: '',
                  },
                },
              ],
            },
          },
          {
            data: liaojieData,
            type: 'line',
            smooth: true,
            name: '了解',
            color: 'rgba(0,114,255,1.000)',
            areaStyle: {
              //右，下，左，上
              color: new graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: 'rgba(0,114,255,1.000)',
                  },
                  {
                    offset: 1,
                    color: 'rgba(9,202,243,.0)',
                  },
                ],
                false,
              ),
            },
            markPoint: {
              data: [
                {
                  name: '最大值',
                  type: 'max',
                  valueDim: 'y',
                  symbol: 'rect',
                  symbolSize: [60, 26],
                  symbolOffset: [0, -20],
                  itemStyle: {
                    color: 'rgba(0,0,0,0)',
                  },
                  label: {
                    color: '#09CAF3',
                    backgroundColor: 'rgba(9,202,243,0.1)',

                    borderRadius: 6,
                    borderColor: 'rgba(9,202,243,.5)',
                    padding: [7, 14],
                    formatter: '{c}',
                    borderWidth: 0.5,
                  },
                },
                {
                  name: '最大值',
                  type: 'max',
                  valueDim: 'y',
                  symbol: 'circle',
                  symbolSize: 6,
                  itemStyle: {
                    color: '#09CAF3',
                    shadowColor: '#09CAF3',
                    shadowBlur: 8,
                  },
                  label: {
                    formatter: '',
                  },
                },
              ],
            },
          },
          {
            data: baogaoData,
            type: 'line',
            smooth: true,
            name: '报告',
            color: 'rgba(255,0,0,0.7)',
            areaStyle: {
              //右，下，左，上
              color: new graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: 'rgba(255,0,0,0.7)',
                  },
                  {
                    offset: 1,
                    color: 'rgba(9,202,243,.0)',
                  },
                ],
                false,
              ),
            },
            markPoint: {
              data: [
                {
                  name: '最大值',
                  type: 'max',
                  valueDim: 'y',
                  symbol: 'rect',
                  symbolSize: [60, 26],
                  symbolOffset: [0, -20],
                  itemStyle: {
                    color: 'rgba(0,0,0,0)',
                  },
                  label: {
                    color: '#09CAF3',
                    backgroundColor: 'rgba(9,202,243,0.1)',

                    borderRadius: 6,
                    borderColor: 'rgba(9,202,243,.5)',
                    padding: [7, 14],
                    formatter: '{c}',
                    borderWidth: 0.5,
                  },
                },
                {
                  name: '最大值',
                  type: 'max',
                  valueDim: 'y',
                  symbol: 'circle',
                  symbolSize: 6,
                  itemStyle: {
                    color: '#09CAF3',
                    shadowColor: '#09CAF3',
                    shadowBlur: 8,
                  },
                  label: {
                    formatter: '',
                  },
                },
              ],
            },
          },
          {
            data: fankuiData,
            type: 'line',
            smooth: true,
            name: '反馈',
            color: 'rgba(255,0,255,0.7)',
            areaStyle: {
              //右，下，左，上
              color: new graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: 'rgba(255,0,255,0.7)',
                  },
                  {
                    offset: 1,
                    color: 'rgba(9,202,243,.0)',
                  },
                ],
                false,
              ),
            },
            markPoint: {
              data: [
                {
                  name: '最大值',
                  type: 'max',
                  valueDim: 'y',
                  symbol: 'rect',
                  symbolSize: [60, 26],
                  symbolOffset: [0, -20],
                  itemStyle: {
                    color: 'rgba(0,0,0,0)',
                  },
                  label: {
                    color: '#09CAF3',
                    backgroundColor: 'rgba(9,202,243,0.1)',

                    borderRadius: 6,
                    borderColor: 'rgba(9,202,243,.5)',
                    padding: [7, 14],
                    formatter: '{c}',
                    borderWidth: 0.5,
                  },
                },
                {
                  name: '最大值',
                  type: 'max',
                  valueDim: 'y',
                  symbol: 'circle',
                  symbolSize: 6,
                  itemStyle: {
                    color: '#09CAF3',
                    shadowColor: '#09CAF3',
                    shadowBlur: 8,
                  },
                  label: {
                    formatter: '',
                  },
                },
              ],
            },
          },
          {
            data: yijiaoData,
            type: 'line',
            smooth: true,
            name: '移交',
            color: 'rgba(255,114,0,1.000)',
            areaStyle: {
              //右，下，左，上
              color: new graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: 'rgba(255,114,0,1.000)',
                  },
                  {
                    offset: 1,
                    color: 'rgba(9,202,243,.0)',
                  },
                ],
                false,
              ),
            },
            markPoint: {
              data: [
                {
                  name: '最大值',
                  type: 'max',
                  valueDim: 'y',
                  symbol: 'rect',
                  symbolSize: [60, 26],
                  symbolOffset: [0, -20],
                  itemStyle: {
                    color: 'rgba(0,0,0,0)',
                  },
                  label: {
                    color: '#09CAF3',
                    backgroundColor: 'rgba(9,202,243,0.1)',

                    borderRadius: 6,
                    borderColor: 'rgba(9,202,243,.5)',
                    padding: [7, 14],
                    formatter: '{c}',
                    borderWidth: 0.5,
                  },
                },
                {
                  name: '最大值',
                  type: 'max',
                  valueDim: 'y',
                  symbol: 'circle',
                  symbolSize: 6,
                  itemStyle: {
                    color: '#09CAF3',
                    shadowColor: '#09CAF3',
                    shadowBlur: 8,
                  },
                  label: {
                    formatter: '',
                  },
                },
              ],
            },
          },
          {
            data: zhenggaiData,
            type: 'line',
            smooth: true,
            name: '整改',
            color: 'rgba(0,255,255,1.000)',
            areaStyle: {
              //右，下，左，上
              color: new graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: 'rgba(0,255,255,1.000)',
                  },
                  {
                    offset: 1,
                    color: 'rgba(9,202,243,.0)',
                  },
                ],
                false,
              ),
            },
            markPoint: {
              data: [
                {
                  name: '最大值',
                  type: 'max',
                  valueDim: 'y',
                  symbol: 'rect',
                  symbolSize: [60, 26],
                  symbolOffset: [0, -20],
                  itemStyle: {
                    color: 'rgba(0,0,0,0)',
                  },
                  label: {
                    color: '#09CAF3',
                    backgroundColor: 'rgba(9,202,243,0.1)',

                    borderRadius: 6,
                    borderColor: 'rgba(9,202,243,.5)',
                    padding: [7, 14],
                    formatter: '{c}',
                    borderWidth: 0.5,
                  },
                },
                {
                  name: '最大值',
                  type: 'max',
                  valueDim: 'y',
                  symbol: 'circle',
                  symbolSize: 6,
                  itemStyle: {
                    color: '#09CAF3',
                    shadowColor: '#09CAF3',
                    shadowBlur: 8,
                  },
                  label: {
                    formatter: '',
                  },
                },
              ],
            },
          },
        ],
      };
    },
  },
};
</script>
<style lang='scss' scoped>
.right_top_inner {
}
</style>
